<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="username"
      label="用户名"
      placeholder="请输入用户名"
      clearable
    />
    <van-field
      v-model="password"
      label="密码"
      placeholder="请输入密码"
      clearable
    />
    <div class="submit-button">
      <van-button round block type="info" native-type="submit">
        更新信息
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from "vue";
import * as api from "@/api/user";
const user = JSON.parse(window.localStorage.getItem("user"));
// 定义表单数据的响应式引用
const username = ref(user.username);
const password = ref(user.password);

// 提交表单时触发的方法
const onSubmit = async (event) => {
  const res = await api.update({
    ...user,
    username: username.value,
    password: password.value,
  });
  showNotify({
    type: res.success ? "success" : "danger",
    message: res.message,
  });
  if (res.success) {
    window.localStorage.setItem(
      "user",
      JSON.stringify({
        ...user,
        username: username.value,
        password: password.value,
      })
    );
  }
};
</script>

<style>
.submit-button {
  margin-top: 20px;
}
</style>